<template>
  <div class="notice-box" :style="isHidden ? 'display:none':''">
    <div class='notice-box_title'>
      <p>本站公告🎉</p>
    </div>
    <div class="notice-box_info">
      <span class="info_span"> {{ notice }}</span>
    </div>
    <div class='notice-box_btn' @click='changeHiddenByCookie'>
      <button>朕已阅</button>
    </div>
    <div class="notice-box_close" @click='changeHidden'>
      <svg class="ic-close" viewBox="0 0 1024 1024">
        <path d="M573.44 512.128l237.888 237.696a43.328 43.328 0 0 1 0 59.712 43.392 43.392 0 0 1-59.712 0L513.728 571.84 265.856 819.712a44.672 44.672 0 0 1-61.568 0 44.672 44.672 0 0 1 0-61.568L452.16 510.272 214.208 272.448a43.328 43.328 0 0 1 0-59.648 43.392 43.392 0 0 1 59.712 0l237.952 237.76 246.272-246.272a44.672 44.672 0 0 1 61.568 0 44.672 44.672 0 0 1 0 61.568L573.44 512.128z"></path>
      </svg>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, reactive, toRefs } from 'vue'
import { useAppStore } from '@/stores/app'
import cookies from 'js-cookie'

export default defineComponent({
  name: 'Notice',
  setup() {
    const appStore = useAppStore()
    const reactiveData = reactive({
      isHidden: false as boolean
    })
    onMounted(()=>{
      reactiveData.isHidden = cookies.get('notice_hidden') || false
    })
    const changeHidden = () => {
      reactiveData.isHidden = true
    }
    const changeHiddenByCookie = () => {
      reactiveData.isHidden = true
      cookies.set('notice_hidden',true,{expires: 1})
    }
    return {
      ...toRefs(reactiveData),
      changeHidden,
      changeHiddenByCookie,
      notice: computed(() => {
        return appStore.websiteConfig.notice
      })
    }
  }
})
</script>
